<template>
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="() => { $router.push('/home/fen') }" />


    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="item in xindata">
                <router-link :to="'/xiangqing/' + item.goods_id">
                    <van-card :title="item.goods_name"
                        :thumb="item.goods_big_logo ? item.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
                </router-link>
            </div>
        </van-list>
    </van-pull-refresh>


</template>

<script setup>
import { useRoute } from 'vue-router';
let route = new useRoute()
import { ref } from 'vue';
import { searchApi } from '@/api/api'
let lbdata = ref([])
let page = ref(1)
let pagesize = ref(7)
let xindata = ref([])

const xr = () => {
    searchApi(route.params.cat_name).then(res => {
        console.log('列表数据', res);
        lbdata.value = res.data.message.goods
        let kais = (page.value - 1) * pagesize.value
        let jies = kais + pagesize.value
        xindata.value = res.data.message.goods.slice(kais, jies)
    })
}
xr()

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onRefresh = () => {
    // 清空列表数据
    page.value = 2
    finished.value = false;
    refreshing.value = false;
    xindata.value = []
    xr();
};

const onLoad = async () => {
    if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
    }
    let res = await searchApi(route.params.cat_name)
    page.value++;
    let kais = (page.value - 1) * pagesize.value
    let jies = kais + pagesize.value
    let newdata = res.data.message.goods.slice(kais, jies)
    xindata.value = [...xindata.value, ...newdata]
    loading.value = false
    if (page.value > 3) {
        finished.value = true
    }

}
</script>

<style lang="scss" scoped></style>